Mermaid

Code

```{mermaid}
%%| label: fig-mermaid
%%| fig-width: 6
%%| fig-cap: |
%%|   How Quarto orchestrates rendering of documents: start with 
%%|   a qmd file, use the Knitr or Jupyter engine to perform the 
%%|   computations and convert it to an md file, then use Pandoc 
%%|   to convert to various file formats including HTML, PDF, 
%%|   and Word.
flowchart LR
  A[qmd] --> B(Knitr)
  A[qmd] --> C(Jupyter)
  B(Knitr) --> D[md]
  C(Jupyter) --> D[md]
  D[md] --> E(pandoc)
  E(pandoc) --> F(HTML)
  E(pandoc) --> G(PDF)
  E(pandoc) --> H(Word)
  E(pandoc) --> I{and more}
```

Figure 1: How Quarto orchestrates rendering of documents: start with a qmd file, use the Knitr or Jupyter engine to perform the computations and convert it to an md file, then use Pandoc to convert to various file formats including HTML, PDF, and Word.

Graphviz

Code

```{dot}
//| label: fig-dot
//| fig-width: 3
//| fig-cap: |
//|   How Quarto orchestrates rendering of documents: start with 
//|   a qmd file, use the Knitr or Jupyter engine to perform the 
//|   computations and convert it to an md file, then use Pandoc 
//|   to convert to various file formats including HTML, PDF, 
//|   and Word.
graph G {
  layout=neato
  qmd -- Knitr;
  qmd -- Jupyter;
  Knitr -- md;
  Jupyter -- md;
  md -- pandoc;
  pandoc -- HTML;
  pandoc -- PDF;
  pandoc -- Word;
  pandoc -- more;
}
```

Figure 2: How Quarto orchestrates rendering of documents: start with a qmd file, use the Knitr or Jupyter engine to perform the computations and convert it to an md file, then use Pandoc to convert to various file formats including HTML, PDF, and Word.

Couple of notes on creating diagrams with Quarto:

For Mermaid diagrams, use %%| for chunk options. For Graphviz, use //|.
The online editors for Mermaid and Graphviz are very helpful for interactively developing the code for a diagram:
- Mermaid Live Editor
- Graphviz Online

Reference

https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day/posts/21-diagrams/